<template>
	<view class="content">
		<view class="tabList">
			<text @click="changeTab(index)" v-for="(item,index) in tbList" :key="index" :class="suo == index?'active':''">{{item.name}}</text>
		</view>
		
		<view class="serviceList" v-if="orders.length>0">
			<view class="serli" v-for="(item,index) in orders" :key="index">
				<view class="serTop">
					{{item.createTime}}
					<text v-if="item.status == 'need_pay'">待付款</text>
					<text v-if="item.status == 'need_fw'">待服务</text>
					<text v-if="item.status == 'in_fw'">进行中</text>
					<text v-if="item.status == 'finish'">已完成</text>
					<text v-if="item.status == 'cancel'">已取消</text>
				</view>
				
				<view class="serInfo" v-for="(sec,ind) in item.orderDetails" :key="ind">
					<view class="serImg">
						<image :src="sec.goodsImage" mode=""></image>
					</view>
					<view class="serTxt">
						<text class="txtt1">{{sec.goodsName}}</text>
						<view class="payTxt">
						数量：<text>{{sec.goodsCount}}</text>	实付款：<text>￥{{sec.goodsAllAmount}}</text>
						</view>
					</view>
				</view>
				<view class="" style="text-align: right;padding-right: 50rpx;font-size: 30rpx;color: #747474;">
					合计：￥{{item.payAmont}}
				</view>
				<view class="serbtnBox" v-if="item.status == 'need_pay'">
					<text @click="docancelOrder(item)">取消订单</text>
					<text @click="toPay(item.orderNum)">去支付</text>
				</view>
			</view>
		</view>
		
		<view class="serviceList" v-else>
			<u-empty  mode="order" />
		</view>
	</view>
</template>

<script>
	import { userOrderList,doEditOrder,payOrder} from '@/api/login.js';
	
	export default {
		data() {
			return {
				suo: 0,
				orders:[],
				tbList: [
					{
						name:"待支付",
						code:"need_pay"
					},
					{
						name:"待服务",
						code:"need_fw"
					},
					{
						name:"进行中",
						code:"in_fw"
					},
					{
						name:"已完成",
						code:"finish"
					},
					{
						name:"已取消",
						code:"cancel"
					},
					
				]
			}
		},
		onLoad(opt) {
			if(opt.type == 1) {
				this.suo = 1;
			} else {
				this.suo = 0;
			}
			this.getList()
		},
		methods: {
			toPay(orderNum){
				var self =this
				uni.showLoading({
					icon:"none"
				})
				payOrder(orderNum).then(res=>{
					if(res.code == 200) {
						console.log(res.data)
						var data = res.data
						wx.requestPayment({ //下面参数为必传
							// provider: 'wxpay', //支付类型
							"appId": "wx380bacc0be9a6e96", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							"nonceStr": data.nonceStr, // 随机字符串
							"package": data.prepayId, // 固定值
							"timeStamp": data.timeStamp + "", // 时间戳（单位：秒）
							"paySign": data.paySign, // 签名，这里用的 MD5/RSA 签名
							"signType": "RSA",
							success(res) {
								console.log("支付成功", res)
								console.log("完成")
								if (res.errMsg === 'requestPayment:ok') {
									uni.showToast({
										title: "支付成功",
										icon: 'success',
										duration: 2000
									})
									setTimeout(() => {
										uni.hideLoading()
										self.getList()
									}, 1000);
								}
							},
							fail(err) {
								console.log(err)
								//应该跳转到待支付的订单页面（或者跳转到订单详情页面）
								uni.showToast({
									title: "支付失败",
									icon: 'error',
									duration: 2000
								})
														
								uni.hideLoading()
								// uni.navigateTo({
								// 	url: "/myPackage/userInfo/order"
								// })
							}
						})
					} else {
						uni.$u.toast(res.msg);
					}
				});
				
			},
			docancelOrder(item){
				item.status='cancel'
				doEditOrder(item).then(res=>{
					if(res.code == 200) {
						this.getList()
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			getList(){
				userOrderList(this.tbList[this.suo].code).then(res=>{
					if(res.code == 200) {
						this.orders=res.rows
					} else {
						uni.$u.toast(res.msg);
					}
				});
			},
			changeTab(index){
				this.suo = index;
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color:#F5F5F5;padding:24rpx;
	.serviceList{
		padding-top:24rpx;
		.serli{
			background-color:#fff;border-radius:8rpx;margin-bottom:16rpx;
			.serTop{
				@include baseFont(28rpx,#979797,80rpx);@include flx;justify-content: space-between;
				padding:0 32rpx;border-bottom:1px solid #ECEBEB;
				text{
					display: block;color:#EC6A38;
				}
			}
			.serbtnBox{
				@include flx;margin-top:24rpx;justify-content: flex-end;padding-right:32rpx;padding-bottom:32rpx;
				text{
					border: 1px solid #D9D9D9;width:210rpx;height:60rpx;text-align: center;
					@include baseFont(28rpx,#333,60rpx);border-radius:40rpx;display: block;
				}
				text:first-of-type{
					margin-right:26rpx;
				}
				text:last-of-type{
					border: 1px solid rgba(54, 113, 233, 0.5);color:#3671E9;
				}
			}
			.serInfo{
				@include flx;padding:24rpx 32rpx 0;
				.serImg{
					margin-right:18rpx;
					image{
						display: block;width:100rpx;height:100rpx;border-radius:8rpx;
					}
				}
				.serTxt{
					.txtt1{
						@include baseFont(32rpx,#000,48rpx);font-weight:500;
					}
					.payTxt{
						@include baseFont(28rpx,rgba(0, 0, 0, 0.5),48rpx);
					}
				}
			}
		}
	}
	.tabList{
		@include flx;padding:0 30rpx;justify-content: space-between;
		text{
			display: block;@include baseFont(32rpx,#333,44rpx);padding-bottom:18rpx;position: relative;
		}
		.active{
			color:#3671E9;
		}
		.active::after{
			content:'';width:52rpx;height:6rpx;background: #3671E9;border-radius:3rpx;position: absolute;
			bottom:0;left:50%;transform: translateX(-50%);
		}
	}
}
</style>
